<template>
  <div>
    <l-polygon
      v-for="(item,index) in polygons"
      :key="index"
      :lat-lngs="item.latlngs"
      :color="item.color"
      :fill-opacity="getOpacity(item)"
      :name="item.name"
      @mouseover="mouseOver(item)"
      @mouseout="mouseOut(item)"
      @click="showPolygon(item)"
    >
      <l-tooltip :options="options">
        <div style="font-size:18px;">
          {{ item.name }}
        </div>
      </l-tooltip>
    </l-polygon>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeviceImage } from '@/utils/device'
export default {
  name: 'MapPolygons',
  data() {
    return {
      dialogVisible: false,
      title: '地块种植信息',
      options: {
        permanent: true,
        interactive: false,
        fontSize: '16px',
        direction: 'bottom',
        className: 'anim-tooltip'
      }
    }
  },
  computed: {
    ...mapGetters(['project']),
    polygons() {
      if (this.project && this.project.kml) {
        const project
        const res = [this.project].map((val) => {
          val.latlngs = val.kml.split(';').map((item) => {
            const latlng = item.split(',')
            return [latlng[1], latlng[0]]
          })
          val.color = 'green'
          val.opacity = 20
          return val
        })
        return res
      }
      return []
    }
  },
  methods: {
    getIcon(item) {
      // eslint-disable-next-line no-undef
      return L.icon({
        iconSize: [40, 40],
        iconUrl: getDeviceImage(item)
      })
    },
    getOpacity(item) {
      return item.opacity / 100
    },
    mouseOver(item) {
      item.opacity = 60
    },
    mouseOut(item) {
      item.opacity = 20
    },
    showPolygon(field) {
      this.$emit('showPolygon', field)
    }
  }
}
</script>
